<template>
  <div class="number-select-box">
    <div class="select-row border-bottom">
      <div class="top">
        <tail-box :place="item.place.context" class="adjust"></tail-box>
      </div>
      <div class="bottom">
        <lottery-box-no-odds
          ref="lotterybox"
          class="box-adjust"
          v-for="(number, index) in item.numbers"
          :key="number.id"
          :content="number.number"
          :class="number.selected ? 'active' : ''"
          @click.native="handleBallSelect(index)">
        </lottery-box-no-odds>
      </div>
    </div>
  </div>
</template>

<script>
import { numberSelectMixin } from '@/assets/js/mixin.js'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxNoOdds from '@/components/base/lottery-box-no-odds/lottery-box-no-odds'
import TailBox from '@/components/tail-box/tail-box'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    PlayInstruction,
    LotteryBoxNoOdds,
    TailBox,
  },
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          id: 1,
          place: {
            context: '',
            position: 0
          },
          numbers: [
            {
              id: 1,
              number: 0,
              selected: false,
              parameter: [
                {
                  type: 'a',
                  number: 9.75,
                }
              ]
            }
          ]
        }
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  methods: {
     handleBallSelect(index, type) {
      let numbers = this.clonedItem.numbers
      numbers[index].selected = numbers[index].selected ? false : true
      this.$emit('click', this.clonedItem)
    }
  },
  computed: {
    clonedItem() {
      return JSON.parse(JSON.stringify(this.item))
    },
    ...mapGetters('lottery', ['getUnitPrice', 'getUnitRate'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .select-row 
    .top 
      padding 10px
      box-sizing border-box
    .bottom 
      display flex
      justify-content center 
      margin-bottom 10px  
      height 55px
      .box-adjust >>> .box 
        height 45px 
        width 124px 
      .active >>> .box 
        color $color-theme-red 
        background rgba($color-theme-red, 0.102)
        border 1px solid $color-theme-red
     

</style>